<!-- 图片选择器
属性：

<ImagesSelect v-model="formData.sm_viewPath" path="/areas/home/views" split="/" ext="jpg,jpeg,gif"></ImagesSelect>
-->
<script src="../../../../../../../../MyWork/智慧烟草/app/web/smt/src/click-house/tobacco/database.js"></script>
<template>
    <div style="overflow: hidden">
        <div  @click="showModal" style="float:left">
            <slot></slot>
        </div>
        <Modal v-model="isShowModal" title="选择或上传图片" @on-ok="onOk" @on-cancel="onCancel" width="585"   :transfer="false" class-name="vertical-center-modal">
            <div :style="{height:fileMangeHeight}">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        <div name="leftPane" class="leftPane">
                            <Tree :data="getDir(fileItems)" :load-data="loadData" @on-select-change="treeOnSelectChange"></Tree>
                        </div>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <div name="rightPane" class="rightPane">
                            <div class="fileContainer">
                                <div class="item">
                                    <div class="preview">
                                        <Icon class="icon" type="md-add"  />
                                    </div>
                                    <span>添加新文件</span>
                                </div>
                                <template  v-for="item in getChildrenAllFile">
                                    <div v-if="item.type==='dir'" class="item" :class="{active:item.select}" @dblclick="dbClickItem(item)">
                                        <div class="preview">
                                            <Icon class="icon" type="md-folder"  />
                                        </div>
                                        <span>{{item.title}}</span>
                                    </div>
                                    <div v-else class="item" :class="{active:item.select}" @click="selectFile(item)">
                                        <div class="preview">
                                            <Icon class="icon" type="md-document"  />
                                        </div>
                                        <span>{{item.title}}</span>
                                    </div>
                                </template>


                            </div>
                        </div>

                    </div>
                </Split>
            </div>
        </Modal>
    </div>
</template>

<script>
    import AppFrame from "../libs/app-frame";
    export default {
        name: "image-select",
        props:{
            value:{default:''},
            multiple:{default:false},
            path:{default: ''},
            ext:{default:''},
            isCurDir:{default:0}//是否限定在当前目录 下级不展开
        },
        model: {
            prop: 'value',
            event: 'updateVal'
        },
        data(){
            return{
                fileMangeHeight:'500px',
                split:0.2,
                isShowModal:false, //是否显示模态对话框
                selectItems:[],//选择的图片path
                fileItems:[],
                dir:[],

                curSelectDir:{},

            }
        },
        mounted(){
            $(".ivu-modal-body").css('padding','0px');
            this.fixPaneScroll();
        },
        created(){
            this.getData(this.path);
        },
        computed:{
            getChildrenAllFile(){
                console.log( this.curSelectDir);
                return this.curSelectDir._children;
            }
        },
        methods:{
            //显示对话框
            showModal() {
                this.isShowModal = true;
            },
            //搞定左边高度

            fixPaneScroll() {
                let self=this;
                $("[name='leftPane']").slimScroll({
                    height: self.fileMangeHeight,
                    alwaysVisible: false,
                    allowPageScroll: false,
                    touchScrollStep: 200,
                    color: "#999",
                    size: "5px",
                    distance: "2px"
                });
                $("[name='rightPane']").slimScroll({
                    height:  self.fileMangeHeight,
                    alwaysVisible: false,
                    allowPageScroll: false,
                    touchScrollStep: 200,
                    color: "#999",
                    size: "5px",
                    distance: "2px"
                });
            },

            getDir(data){
                return data.filter(item=>{
                    return item.title.indexOf('.')===-1;
                })
            },

            getData(rootPath){
                let self=this;
                AppFrame.Http.Post("/manage-api/system/file/getItems",{rootPath:rootPath,isCurDir:this.isCurDir}).then(function (ret) {
                    if(ret && ret.Result===1){
                        ret.Data.map(item=>{
                            item.select=false;
                        });
                        self.fileItems=ret.Data;
                    }
                }).catch(function(err) {
                    console.log(err);
                    self.$Message.error(JSON.stringify(err));
                });
            },

            loadData (item, callback) {
                item.loading = true;
                let self=this;
                let postData={rootPath:item.path,ext:self.ext};
                AppFrame.Http.Post("/manage-api/system/file/getItems",postData).then(function (ret) {
                    item.loading = false;
                    if(ret && ret.Result===1){
                        ret.Data.map(item=>{
                            item.select=false;
                        });
                        item._children=ret.Data;
                        item.children=self.getDir(ret.Data);
                        callback(item.children);
                    }

                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                    callback();
                });

            },

            treeOnSelectChange(item){
                this.curSelectDir=item[0];
                if( this.curSelectDir &&  this.curSelectDir.children.length===0){
                    this.loadData(this.curSelectDir,children=> {

                    });
                }
            },

            dbClickItem(item){
                this.curSelectDir=item;
                if( this.curSelectDir &&  this.curSelectDir.children.length===0){
                    this.loadData(this.curSelectDir,children=> {

                    });
                }
            },

            selectFile(item){

                if(!this.multiple){//如果是单选
                    this.selectItems.map(it=>{
                        it.select=false;
                    });
                    this.selectItems.splice(0,this.selectItems.length);
                    item.select=true;
                    this.selectItems.push(item);
                }else{//如果是多选
                    if(item.select){
                        item.select=false;
                        for(let i=this.selectItems.length;i>-1;i--){
                            let it = this.selectItems[i];
                            if(it.path===item.path){
                                this.selectItems.splice(i,1);
                                break;
                            }
                        }
                    }else{
                        item.select=true;
                        this.selectItems.push(item);
                    }
                }


            },
            onOk() {
                let ids = [];
                let names = [];
                this.selectItems.map(function(item) {
                    //ids.push(item.UserID);
                   // names.push(item.UserRealName);
                });
                // this.inputVal = names.join(',');
                // this.setValue(ids);
            },

           onCancel() {
                this.isShowModal = false;
            },

            setValue: function(val) {
                this.$emit("updateVal", val);
            }
        }
    }
</script>

<style  scoped>

.leftPane {padding: 5px;overflow: hidden}
.rightPane{padding: 12px 5px 5px 12px;overflow: hidden}
.rightPane > .fileContainer{overflow: hidden}
.rightPane > .fileContainer > .item{width:100px;float:left;margin:5px;text-align: center;cursor: pointer;}
.rightPane > .fileContainer > .item >.preview{height: 80px;background-color: #f5f5f5;position: relative;border:1px dotted #ddd;margin-bottom: 3px}
.rightPane > .fileContainer > .item >.preview > .icon{font-size: 5rem;color:#ccc;position: relative; top:2px}
.rightPane > .fileContainer > .item.active > .preview{border:1px dotted #0f80cc}


</style>
